<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        h1+p {
            font-weight: bold;
            background-color: #333;
            color: #fff;
            padding: .5em;
        }
    </style>

    <style>
        li:first-of-type+li {
            color: red;
        }
    </style>
</head>

<body>

    <!-- 关系选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators -->

    <!-- 邻接兄弟 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%E9%82%BB%E6%8E%A5%E5%85%84%E5%BC%9F -->
    <!-- 邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。 -->
    <!-- 相邻兄弟选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator -->
    <!-- 相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。 -->


    <article>
        <h1>A heading</h1>
        <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

        <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
            collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
    </article>

    <hr>

    <ul>
        <li>One</li>
        <li>Two!</li>
        <li>Three</li>
    </ul>

</body>

</html>